<template>
  <div class="table-container" :class="{ 'multi-table': true }">
    <div class="t-header">
      <div class="t-th" v-for="(item, index) in tableHeaders" :key="index">
        {{ item }}
      </div>
    </div>
    <div class="t-body">
      <div
        class="t-row"
        :style="{
          gridTemplateColumns: `repeat(${repeatColumn}, 1fr)`,
        }"
        v-for="(row, rowIndex) in tableDataNew"
        :key="rowIndex"
      >
        <div class="t-td" v-for="(cell, cellIndex) in row" :key="cellIndex">
          <template v-if="isArray(cell)">
            <div
              class="t-td"
              v-for="(item, itemIndex) in cell"
              :key="itemIndex"
            >
              {{ item }}
            </div>
          </template>
          <template v-else>{{ cell }}</template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, reactive } from "vue";

const props = defineProps({
  // 表格列配置
  headers: {
    type: Array,
    default: () => [],
  },
  // 表格数据
  data: {
    type: Array,
    default: () => [],
  },
  splitNum: { type: Number, default: 2 }, // 分栏列索引
});

const isArray = (data) => {
  return Array.isArray(data);
};

const repeatColumn = computed(() => {
  return props.headers.length * props.splitNum + (props.splitNum - 1)
})

const tableHeaders = computed(() => {
  // return Array(props.splitNum).fill(props.headers).flat()
  return Array.from({ length: props.splitNum }, (_, i) =>
    i ? [{ value: "", isGap: true }, ...props.headers] : props.headers
  ).flat();
});

// 精简的列分割方法
const splitTableData = (data, columns = 1) => {
  if (columns <= 1) return data;

  return data.reduce((result, item, index) => {
    const chunkIndex = Math.floor(index / columns);
    const colIndex = index % columns;

    if (!result[chunkIndex]) {
      result[chunkIndex] = {};
    }

    // 为每个属性添加列索引后缀（第一列不加后缀）
    Object.keys(item).forEach(key => {
      const newKey = colIndex === 0 ? key : `${key}${colIndex}`;
      result[chunkIndex][newKey] = item[key];
    });

    // 在列之间添加 isGap（除了最后一列）
    if (colIndex < columns - 1) {
      result[chunkIndex][`isGap${colIndex + 1}`] = true;
    }

    return result;
  }, []);
};

// 使用示例
const tableDataNew = splitTableData(props.data, props.splitNum);
console.log("xxxxxxxxxxx", tableDataNew);
</script>

<style lang="scss" scoped>
.table-container {
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  overflow: hidden;
  background: white;

  .t-header {
    width: 100%;
    display: flex;
    background: #e8e8e8;
    font-weight: bold;
  }

  .t-body {
    width: 100%;

    .t-row {
      width: 100%;
      display: grid;
      // grid-template-columns: 1fr 1fr 1fr;

      &:nth-child(2n) {
        background-color: antiquewhite;
      }

      .t-td {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
      }
    }
  }

  .t-th,
  .t-td {
    flex: 1;
    flex-shrink: 0;
    text-align: center;
    min-height: 50px;
    padding: 10rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
